@import "module/variable";
@import "module/initCSS";
@import "module/header";
@import "module/user_tabs";
@import "module/footer";
@import "module/mixin/manager_view_chat";

.header {
    @include commonHeader2();
}

.user-tabs {
    @include userTabs();
}

.footer{
    @include commonFooter();
    margin-top: 30px;
}

.depart-member-view{
    overflow: hidden;
}

.view-type-tabs{
    width: 240px;
    margin: 26px auto 0;
    a{
        float: left;
        display: block;
        width: 118px;
        height: 38px;
        border: 1px solid #b8b9ba;
        line-height: 38px;
        color: #242728;
        text-align: center;
        position: relative;
        z-index: $zindexMin;
        &:nth-of-type(1){
            border-radius: 3px 0 0 3px;
        }
        &:nth-of-type(2){
            border-radius: 0 3px 3px 0;
            left: -1px;
        }
        &.focus{
            background: #209ea7;
            border-color: #1b858c;
            z-index: $zindexMin + 1;
            color: #ffffff;
        }
    }
}

.view-type-cons{}



.member-list-view{
    margin: -10px;
    padding-bottom: 10px;
    .depart-block{
        display: table;
        width: 100%;
        margin: 20px 0 0 0;
        .depart-name{
            font-size: 24px;
            font-weight: bold;
            color: #313233;
            line-height: 1;
            margin: 0 0 0 10px;
            position: relative;
            z-index: $zindexMin;
            top: 6px;
        }
        .depart-class-list{
            display: table-row;
            .depart-class{
                display: table-cell;
                width: 25%;
                padding: 0 10px;
                overflow: hidden;
                div{
                    position: relative;
                    z-index: $zindexMin;
                    background: #faf7fa;
                    padding-bottom: 5px;
                    margin-top: 20px;
                    &:before{
                        display: block;
                        content: ' ';
                        position: absolute;
                        z-index: $zindexMin;
                        top:0;
                        left:0;
                        width: 100%;
                        height: 500px;
                        background: #faf7fa;
                    }
                    h3,ul{
                        position: relative;
                        z-index: $zindexMin+1;
                        padding: 0 20px;
                    }

                    h3{
                        font-size: 13px;
                        font-weight: bold;
                        color: #313233;
                        padding-top: 20px;
                        padding-bottom: 10px;
                    }

                    ul{
                        li{
                            padding: 11px 0;
                            a{
                                &.nopadding{
                                    padding: 0;
                                }
                                font-size: 14px;
                                line-height: 1;
                                color: #209ea7;
                                padding-left: 15px;
                                position: relative;
                                z-index: $zindexMin;
                                i{
                                    position: absolute;
                                    z-index: $zindexMin;
                                    font-size: 15px;
                                    top: 1px;
                                    left:0;
                                    color: #b8b9ba;
                                }
                                .fa-circle{
                                    top: 3px;
                                    font-size: 12px;
                                    -webkit-transform: scale(0.6);
                                    -moz-transform: scale(0.6);
                                    -ms-transform: scale(0.6);
                                    -o-transform: scale(0.6);
                                    transform: scale(0.6);
                                }
                            }
                        }
                    }

                }
            }
        }

    }
}

.member-chat-view{
    padding: 40px;
    .chat-tabs-list{
        background: #f2f3f4;
        li{
            float: left;
            a{
                display: block;
                font-size: 15px;
                font-weight:bold;
                color: #b0b1b2;
                line-height: 42px;
                padding: 0 38px 0 24px;
                position: relative;
                z-index: $zindexMin;
                &:hover,&.current{
                    color: #209ea7;
                    &:before{
                        display: block;
                        content: ' ';
                        position: absolute;
                        z-index: $zindexMin;
                        bottom:0;
                        left:0;
                        width:100%;
                        height: 3px;
                        background: #29b1ba;
                        @extend .hideFont;
                    }
                }
            }
        }
    }

    .chat-view{
        padding-top: 40px;
        .member-view-chat{
            @include memberChatView();
        }
        .chat-cons{
            text-align: center;
            display: none;
            h3{
                font-size: 20px;
                font-weight: bold;
                color: rgb(36, 39, 40);
            }
        }
    }
}